import 'package:flutter/material.dart';
import 'package:photo_app/apis/api_methods.dart';
import 'detail.dart';

class PhotoPage extends StatefulWidget {
  const PhotoPage({super.key});

  @override
  State<PhotoPage> createState() => _PhotoPageState();
}

class _PhotoPageState extends State<PhotoPage> {
  final ApiMethods _apiMethods = ApiMethods();

  List<dynamic> _folderList = [];

  void _getFolderList() {
    _apiMethods.getFolderList().then((res) {
      setState(() {
        _folderList = res['data'] ?? [];
      });
    }).catchError((onError) {
      debugPrint('_getFolderList onError: $onError');
      setState(() {
        _folderList = [];
      });
    });
  }

  void _navigateToTargetPage(BuildContext context, int index) {
    final dynamic folderItem = _folderList[index];
    final String folderName = folderItem?['folderName'] ?? '';

    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => PhotoDetailPage(folderName: folderName)),
    );
  }

  @override
  void initState() {
    super.initState();
    _getFolderList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('相册'),
        centerTitle: true,
      ),
      body: GridView(
        padding: const EdgeInsets.all(10),
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 10.0,
          crossAxisCount: 3, // 每行显示的列数
          childAspectRatio: 0.65, // 宽高比
        ),
        children: List.generate(_folderList.length, (int index) {
          return _photoBox(context, index);
        }),
      ),
    );
  }

  Widget _photoBox(BuildContext context, int index) {
    final dynamic folderItem = _folderList[index];
    final int fileTotal = folderItem['fileTotal'];

    debugPrint('folderItem: $folderItem');

    return GestureDetector(
      onTap: () => _navigateToTargetPage(context, index),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              // 设置矩形盒子的尺寸
              width: 120,
              height: 120,

              // 添加带有圆角的装饰
              decoration: const BoxDecoration(
                color: Colors.white, // 可选：设置填充颜色
                boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 2)],
              ),

              // 可选：添加子组件或内容
              child: Image.network(
                folderItem['fileUrl'],
                fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) {
                  return Image.network(
                    'https://picsum.photos/120/120?index=$index',
                    fit: BoxFit.cover,
                  );
                },
              )),
          const SizedBox(height: 6),
          Text(
            folderItem['folderName'],
            style: const TextStyle(
              fontSize: 18,
            ),
          ),
          const SizedBox(height: 1),
          Text('共$fileTotal'),
        ],
      ),
    );
  }
}
